<template>
  <div>
    <a-drawer
      width="640"
      placement="right"
      :closable="false"
      :visible="visible"
      :after-visible-change="afterVisibleChange"
      @close="onClose"
    >
      <a-descriptions title="脚本信息" :column=column>
        <a-descriptions-item label="脚本名称">
          {{ scriptDetail.name }}
        </a-descriptions-item>
        <a-descriptions-item label="脚本分组">
          {{ scriptDetail.group_name }}
        </a-descriptions-item>
        <a-descriptions-item label="执行主机">
          {{ scriptDetail.hostname }}
        </a-descriptions-item>
        <a-descriptions-item label="执行命令">
          {{ scriptDetail.command }}
        </a-descriptions-item>
      </a-descriptions>
      <a-divider/>
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :alert="true"
        :rowKey="(record) => record.id"
      >
        <template slot="operator">
          <span class="ant-drawer-title" style="font-weight: bold;">发布记录</span>
        </template>
        <span slot="status" slot-scope="text">
            <a-tag :color="text===0?'green':(text===1?'red':(text===2?'blue':'green'))">
              {{text ===0? '成功':(text ===1?'失败':(text ===2?'构建中':'未构建'))}}
            </a-tag>
        </span>
        <span slot="action" slot-scope="text, record">
            <a v-if="hasPerm('script:detail')" @click="$refs.execForm.open(record)">查看</a>
          </span>
      </s-table>
    </a-drawer>
    <exec-form ref="execForm"/>
  </div>
</template>
<script>
  import { STable } from '@/components'
  import execForm from './ExecForm'
  import { getRecordPage } from '@/api/main/script'

  export default {
    components: {
      STable,
      execForm
    },
    data() {
      return {
        column: {
          xs: 1, sm: 1, md: 1
        },
        visible: false,
        data: [],
        loading: false,
        queryParam: {},
        scriptDetail: {},
        columns: [
          {
            title: '构建时间',
            dataIndex: 'build_at'
          },
          {
            title: '构建人',
            dataIndex: 'build_by'
          },
          {
            title: '耗时',
            dataIndex: 'build_time'
          },
          {
            title: '构建状态',
            dataIndex: 'state',
            scopedSlots: { customRender: 'status' }
          },
          {
            title: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        loadData: parameter => {
          return getRecordPage(Object.assign(parameter, this.queryParam)).then((res) => {
            return res.data
          })
        },
        selectedRowKeys: []
      }
    },
    methods: {
      open(record) {
        this.visible = true
        this.loading = true
        this.queryParam.task = record.id
        this.scriptDetail = record
        this.$refs.table.refresh()
      },
      onSelectChange(selectedRowKeys) {
        this.selectedRowKeys = selectedRowKeys
      },
      afterVisibleChange(val) {
      },
      onClose() {
        this.visible = false
      }
    }
  }
</script>

<style scoped>
  .steps-content {
    min-height: 40px;
    padding: 10px 15px;
    border-radius: 4px;
    background-color: #fafafa;
  }
</style>